<template>
<div>

<el-card class="box-card">
<div slot="header" class="clearfix">
    <span>修改个人信息</span>
</div>

<el-form ref="form" :rules="userinforules" 
	:model="form" status-icon
	label-width="180px"
	>
	<el-form-item label="电话：" >
		{{userInfo.mobile}}
	</el-form-item>

	<el-form-item label="老密码：" class="w500" prop="oldPass">
		<el-input v-model="form.oldPass" type="password" ></el-input>
	</el-form-item>

	<el-form-item label="新密码：" class="w500" prop="newPass">
		<el-input v-model="form.newPass" type="password" ></el-input>
	</el-form-item>

	<el-form-item label="再次输入新密码：" class="w500" prop="reNewPass">
		<el-input v-model="form.reNewPass" type="password" ></el-input>
	</el-form-item>

	<el-form-item class="mt10">
	     <el-button type="primary" 
	     @click="save()">
	     确认修改</el-button>
	</el-form-item>

</el-form>

</el-card>

</div>
</template>

<script>

import { mapGetters } from 'vuex'

export default {
	
	name : 'userinfo',
	
	data () {
		
		var validateOldPass = (rule, value, callback) => {
			this.checkOldPass(value, callback);
		};

		var validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入新密码'));
			} else {
				if (this.form.reNewPass !== '') {
					this.$refs.form.validateField('reNewPass');
				}
				callback();
			}
		};

		var validatePass2 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入新密码'));
			} else if (value !== this.form.newPass) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};


		return {

			form : {
				oldPass : '',
				newPass : '',
				reNewPass : '',
			},

		  	userinforules : {
		  		oldPass : [
		  			{ required: true, message: '请输入老密码', trigger: 'blur' },
		  			{ validator: validateOldPass, trigger: 'blur' }
		  		],
		  		newPass : [
		  			{ required: true, message: '请输入新密码', trigger: 'blur' },
		  			{ validator: validatePass, trigger: 'blur' }
		  		],
		  		reNewPass : [
		  			{ required: true, message: '请再次输入新密码', trigger: 'blur' },
		  			{ validator: validatePass2, trigger: 'blur' }
		  		],
		  	},
		}
	},

	props : {

	},

	components : {
		
	},

	computed : {
		...mapGetters([
			'userInfo',
		]),
	},

	methods : {
		save () {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					const para = {
						fun : 'modifyPass',
						mobile : this.userInfo.mobile,
						oldpassword : this.form.oldPass,
						password : this.form.newPass,
						cb : res => {
							console.log(res);
							if(res == '1'){
								this.$notify.success({
						          title: '成功',
						          message: '修改成功',
						        });
							}else{
								this.$notify.error({
						          title: '错误',
						          message: '修改失败',
						        });
							}
						}
					};
					this.$store.dispatch('update', para);


				} else {
					console.log('error submit!!');
					return false;
				}
			});

		},

		checkOldPass (value, callback) {

			const para = {
				fun : 'checkPass',
				mobile : this.userInfo.mobile,
				password : value,
				cb : res => {
					console.log(res);
					if(res == '0'){
						callback(new Error('密码错误'));
					}else{
						callback();
					}
				}
			};
			this.$store.dispatch('update', para);
		}
	},

	watch : {
	    
	},

	mounted () {
		
	},

}
</script>

<style scoped>

</style>
